<template>
  <div class="detail">
    <back/>
    <img class="head_pic" :src="shopinfo.info && shopinfo.info.head_pic_url" alt="">
    <div class="name">{{shopinfo.info && shopinfo.info.name}} 
      <van-icon @click="collect" name="like"  :color="iscollect?'red':''"  /> 
    </div>

    <div class="goodlist">
      <!-- 左侧 分类列表 -->
      <div class="left">
        <div class="cate" @click="currentIndex = index" :class="{active:currentIndex === index}" v-for="(item,index) in shopinfo.taglist" :key="index">{{item.name}}</div>
      </div>
      <!-- 右侧 商品列表 -->
      <div class="right">
        <div class="good" v-for="(item,index) in shopinfo.taglist && shopinfo.taglist[currentIndex].goodlist" :key="index">
          <div class="img-box">
            <img :src="item.picture" alt="">
          </div>
          <div class="text">
            <div class="name">{{item.name}}</div>
            <div class="desc">{{item.month_saled_content}}</div>
            <div class="price">¥{{item.min_price}}</div>
            <div class="ope">
              <span @click="minus(item)" v-show="isshopcart(item)">-</span>
              <span v-show="isshopcart(item)">{{ isshopcartcount(item) }}</span>
              <span @click="add(item)">+</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 购物车组件 -->
    <Shopcart ref="shopcart" :taglist="shopinfo.taglist"></Shopcart>
    <!-- 操作栏 -->
    <div class="submitBar">
      <div class="left">
        <span @click="$refs.shopcart.show=!$refs.shopcart.show">购物车</span>
        <span>总数:{{totalCount}}</span>
        <span>总价:{{totalPrice}}</span>
      </div>
      <div class="right">去结算</div>
    </div>
  </div>
</template>

<script>
import {shop_shopinfo,shop_fav,shop_unfav} from '../utils/api'
//从vuex导入 mapState 映射函数
import { mapState,mapActions, mapGetters } from 'vuex'
import Shopcart from '../components/Shopcart.vue'
import mixins from '../mixins/index'
import back from "../components/back.vue";

export default {
  data(){
    return {
      currentIndex:0,
      shopinfo:{}
    }
  },
  components:{
    Shopcart,
    back,
  },
  mounted(){
    shop_shopinfo({id: this.$route.params.id }).then((res)=>{
      console.log(res.data.shopinfo);
      if( res.data.code == 200 ){
        //保存店铺数据
        this.shopinfo = res.data.shopinfo;
      }else if( res.data.code == 400 ){
        //弹框提示
        this.$dialog.alert({ 
          title:'温馨提示',
          message: res.data.msg
        }).then(()=>{
          this.$router.go(-1);
        })
      }
    })
  },
  computed:{
    iscollect(){
      //拿到收藏列表,拿到当前详情页的店铺对象

      //如果当前详情页的店铺对象在收藏列表中,则返回true 表示 已收藏
      //如果当前详情页的店铺对象不在收藏列表中,则返回false 表示 未收藏

      var index = this.collectlist.findIndex((item)=>{
        return item.mtWmPoiId == this.shopinfo.mtWmPoiId;
      })

      return index !== -1;

    },
    ...mapGetters('sl',['totalCount','totalPrice']),
    ...mapState('cl',['collectlist']),
    ...mapState('sl',['shopcartlist'])
  },
  methods:{
    collect(){

      if( this.iscollect ){ //条件成立,说明已收藏, 点击取消收藏
        //调用vuex的异步方法 'request_cancel_collect_shop'
        //this.$store.dispatch('request_cancel_collect_shop',this.shopinfo.info);
        this.request_cancel_collect_shop(this.shopinfo.info);
      }else{//条件不成立,说明未收藏, 点击收藏
        //调用vuex的异步方法 'request_collect_shop'
        //this.$store.dispatch('request_collect_shop',this.shopinfo.info);
        this.request_collect_shop(this.shopinfo.info);
      }
    },
    
    //判断 当前商品是否在购物车中, 返回 true 或 false
    isshopcart(good){
      //获取购物车中的商品列表, 获取当前商品
      var index = this.shopcartlist.findIndex((item)=>{
        return item.id == good.id;
      })
      return index != -1;
    },
    
    //mapActions 语法糖 将vuex中的 异步方法 映射为 $store.dispatch('cl/request_cancel_collect_shop')
    //mapActions 语法糖 将vuex中的 异步方法 映射为 $store.dispatch('cl/request_collect_shop')
    ...mapActions('cl',['request_cancel_collect_shop','request_collect_shop']),
    //mapActions 语法糖 将vuex中的 异步方法 映射为 $store.dispatch('sl/request_add_shopcart')
    //mapActions 语法糖 将vuex中的 异步方法 映射为 $store.dispatch('sl/request_minus_shopcart')
    ...mapActions('sl',['request_add_shopcart','request_minus_shopcart'])
  },
  //混入
  mixins:[mixins],
}
</script>

<style lang='scss'>
.detail{
  img.head_pic{
    width: 100%;
  }
  .goodlist{
    display: flex;
    .left{
      width: 80px;
      .cate{
        width: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 30px;
        padding: 0 10px;
        border-left: 3px solid transparent;
      }
      .cate.active{
        font-weight: bold;
        border-left: 3px solid red;
      }
    }
    .right{
      flex:1;
      .good{
        display: flex;
        margin: 10px;
        position: relative;
        .img-box{
          width: 100px;
          margin-right: 10px;
          img{
            width: 100%;
          }
        }
        .text{
          flex:1;
          .name{
            font-weight: bold;
          }
          .price{
            color: orangered;
          }
          .ope{
            position: absolute;
            right: 10px;
            bottom: 10px;
            span{
              display: inline-block;
              width: 16px;
              height: 16px;
              border-radius: 50%;
              text-align: center;
              line-height: 16px;
              color: white;
              background-color: skyblue;
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
  .submitBar{
    z-index: 999;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #555;
    color: white;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      span{
        margin-right: 10px;
      }
    }
  }
}
</style>